<template>
  <erp-modal
    :visible="visible"
    title="审批流程"
    @close="handleClose"
  >
    <template #default>
      <div class="page">
        <!--                    <header class="page__header">-->
        <!--                        <div class="page-actions">-->
        <!--                        </div>-->
        <!--                        <div class="step-tab">-->
        <!--                            <div-->
        <!--                                    v-for="(item, index) in steps"-->
        <!--                                    :key="index"-->
        <!--                                    class="step"-->
        <!--                                    :class="[activeStep==item.key?'active':'']"-->
        <!--                                    @click="changeSteps(item)"-->
        <!--                            >-->
        <!--                                <span class="step-index">{{index+1}}</span>-->
        <!--                                {{item.label}}-->
        <!--                            </div>-->
        <!--                            <div class="ghost-step step" :style="{transform: translateX}"></div>-->
        <!--                        </div>-->
        <!--                        <div></div>-->
        <!--                    </header>-->
        <!--                    <section class="page__content" v-show="true">-->
        <!--                        <div style="width: 100%;height: 100%">-->
        <!--                            <el-input type="textarea" :rows="30" style="width: 100%" v-model="bpmnContent"></el-input>-->
        <!--                        </div>-->
        <!--                    </section>-->
        <section
          v-show="true"
          class="page__content"
        >
          <div style="width: 100%;height: 100%">
            <!--                            <BasicSetting-->
            <!--                                    ref="basicSetting"-->
            <!--                                    :conf="mockData.basicSetting"-->
            <!--                                    v-show="activeStep === 'basicSetting'"-->
            <!--                                    tabName="basicSetting"-->
            <!--                                    @initiatorChange="onInitiatorChange" />-->

            <Process
              v-show="activeStep === 'processDesign'"
              ref="processDesign"
              :conf="processConf"
              :condition-config="config && config.conditionConfig ? config.conditionConfig : null"
              tab-name="processDesign"
              @start-node-change="onStartChange"
            />
          </div>
        </section>
      </div>
    </template>
    <template slot="footer">
      <el-button
        type="primary"
        @click="publish"
      >
        保存
      </el-button>
    </template>
  </erp-modal>
</template>

<script>
import ErpModal from '@/components/erp/ErpModal/ErpModal';
import MockData from './mockData.js';
import BasicSetting from './components/BasicSetting';
import Process from "./components/Process";
import {cloneJson, toast} from "../../utils";
import {base as request} from '@/request';
/**
 * 仿钉钉版的工作流
 * @author maolin
 */
export default {
  name: "WorkFlow",
  components: {
    ErpModal,
    BasicSetting,
    Process
  },
  props:{
    visible: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      required: true
    },
    config: {
      type: Object,
      default () {
        return {
          conditionConfig: null
        };
      }
    }
  },
  data () {
    return {
      bpmnContent: '',
      eq: {
        'lt': '<',
        'lte': '<=',
        'eq': '==',
        'gt': '>',
        'gte': '>=',
      },
      mockData: MockData,
      activeStep: "processDesign",
      steps: [
        { label: "基础设置", key: "basicSetting" },
        { label: "流程设计", key: "processDesign" },
        { label: "高级设置", key: "advancedSetting" }
      ]
    };
  },
  computed: {
    translateX () {
      return `translateX(${this.steps.findIndex(t => t.key === this.activeStep) * 100}%)`;
    },
    processConf () {
      let conf = this.mockData.processData;
      try{
        if (this.item && this.item.showContent) {
          conf = JSON.parse(this.item.showContent);
          conf = conf.processData;
        }
      }catch (e) {
        console.log(e);
      }
      return conf;
    }
  },
  watch: {
    item: {
      handler (item) {
        this.bpmnContent = item.bpmnContent;
      },
      immediate: true
    }
  },
  created() {
  },
  methods: {
    handleClose () {
      this.$emit('update:visible', false);
    },
    changeSteps(item) {
      this.activeStep = item.key;
    },
    /**
             * 同步基础设置发起人和流程节点发起人
             */
    onInitiatorChange (val, labels) {
      const processCmp = this.$refs.processDesign;
      const startNode = processCmp.data;
      startNode.properties.initiator = val['dep&user'];
      startNode.content =  labels  || ' 申请人';
      processCmp.forceUpdate();
    },
    /**
             * 监听 流程节点发起人改变 并同步到基础设置 发起人数据
             */
    onStartChange(node){
      const basicSetting = this.$refs.basicSetting;
      basicSetting.formData.initiator = { 'dep&user': node.properties.initiator };
    },
    publish() {
      const getCmpData = name => this.$refs[name].getData();
      // basicSetting  formDesign processDesign 返回的是Promise 因为要做校验
      // advancedSetting返回的就是值
      // const p1 = getCmpData('basicSetting')
      const p2 = getCmpData('processDesign');
      Promise.all([ p2])
        .then(res => {
          const param = {
            processData: res[0].formData,
            // advancedSetting: getCmpData('advancedSetting')
          };
          console.log(param);
          console.log(JSON.stringify(param));
          // this.inputSubmit()
          if (this.item.id === 1) {
            return false;
          }
          this.sendToServer(param);
        })
        .catch(err => {
          err.target && (this.activeStep = err.target);
          err.msg && this.$message.warning(err.msg);
        });
    },

    sendToServer(param){
      let params = {showContent: param, id: this.item.id, content: JSON.stringify(param)};
      request.post('/activitiController/deployUpdate', params)
        .then( res => {
          toast({
            message: this.$t('common.saveSuccess'),
            type: 'success'
          });
          this.handleClose();
          this.$emit('refresh');
        });

    },

  }
};
</script>

<style lang="scss" scoped>
    $header-height: 54px;
    ::v-deep{
        .vxe-modal--body{
            background-color: #f5f5f7;
        }
    }
    .page{
        height: calc(100%);
        width: 100%;
        box-sizing: border-box;
        .page__header {
            width: 100%;
            height: $header-height;
            display: flex;
            align-items:center;
            justify-content: space-between;
            box-sizing: border-box;
            color: white;
            background: #3296fa;
            font-size: 14px;
            top: 0;
            .page-actions {
                height: 100%;
                text-align: center;
                line-height: $header-height;

                > div {
                    height: 100%;
                    padding-left: 20px;
                    padding-right: 20px;
                    display: inline-block;
                }

                i {
                    font-size: 22px;
                    vertical-align: middle;
                }
            }

            .step-tab {
                display: flex;
                justify-content: center;
                height: 100%;
                position: relative;

                >.step {
                    width: 140px;
                    line-height: $header-height;
                    padding-left: 30px;
                    padding-right: 30px;
                    cursor: pointer;
                    position: relative;

                    &.ghost-step{
                        position: absolute;
                        height: $header-height;
                        left: 0;
                        z-index: -1;
                        background: #4483f2;
                        transition: transform .5s;

                        &::after {
                            content: '';
                            border-width: 6px 6px 6px;
                            border-style: solid;
                            border-color: transparent transparent white;
                            position: absolute;
                            bottom: 0;
                            left: 50%;
                            margin-left: -6px;
                        }
                    }

                    &.active >.step-index  {
                        background: white;
                        color: #4483f2;
                    }

                    >.step-index {
                        display: inline-block;
                        width: 18px;
                        height: 18px;
                        border: 1px solid #fff;
                        border-radius: 8px;
                        line-height: 18px;
                        text-align: center;
                        box-sizing: border-box;
                    }
                }
            }
        }
        .page__content {
            width: 100%;
            height: calc(100%);
            overflow: hidden;
            box-sizing: border-box;
            background:#f5f5f7;
        }
    }
</style>
